<template>
  <el-dialog
          :model-value="dialogVisible"
          :title="dialogStatus == 'create' ? '新建人物' : '编辑人物'"
          :before-close="handleCancelDialog"
          width="70%"
          top="10vh"
  >
    <el-form :model="formData" :rules="rules" label-width="80px" ref="dialogFormDataRef">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入人物姓名" v-model="formData.name" />
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select placeholder="请选择任务性别" clearable v-model="formData.gender">
              <el-option
                      v-for="v in genderList"
                      :key="v"
                      :value="v"
                      :label="v"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="出生地" prop="birthplace">
            <el-input placeholder="请输入人物出生地" v-model="formData.birthplace" clearable />
          </el-form-item>
          <el-form-item label="作品" prop="works">
            <el-tag
                    v-for="work in formData.works"
                    :key="work"
                    closable
                    @close="handleCloseWork(work)"
                    class="mr10"
            >{{work}}</el-tag>
            <el-input
                    v-if="inputWorkVisible"
                    ref="saveWorkInputRef"
                    v-model="inputWorkValue"
                    class="input-new-tag"
                    size="mini"
                    @keyup.enter="handleInputWorkConfirm"
                    @blur="handleInputWorkConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showWorkInput"
            >+ 添加作品</el-button
            >
          </el-form-item>
          <el-form-item label="星座" prop="constellation">
            <el-select placeholder="请选择人物星座" v-model="formData.constellation">
              <el-option
                      v-for="vo in constellationList"
                      :key="vo"
                      :label="vo"
                      :value="vo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="介绍" prop="profile">
            <el-input type="textarea" placeholder="请输入人物简介" v-model="formData.profile" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="英文名" prop="enname">
            <el-input placeholder="请输入英文名" v-model="formData.enname" />
          </el-form-item>
          <el-form-item label="出生日期" prop="birthdate">
            <el-date-picker v-model="formData.birthdate" value-format="YYYY-MM-DD" clearable type="date" placeholder="请选择出生日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="职业" prop="occupation">
            <el-tag
                    v-for="occupation in formData.occupation"
                    :key="occupation"
                    closable
                    @close="handleCloseOccupation(occupation)"
                    class="mr10"
            >{{occupation}}</el-tag>
            <el-input
                    v-if="inputOccupationVisible"
                    ref="saveOccupationInputRef"
                    v-model="inputOccupationValue"
                    class="input-new-tag"
                    size="mini"
                    @keyup.enter="handleInputOccupationConfirm"
                    @blur="handleInputOccupationConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showOccupationInput"
            >+ 添加职业</el-button
            >
          </el-form-item>
          <el-form-item label="血型" prop="bloodtype">
            <el-select placeholder="请选择人物血型" v-model="formData.bloodtype" clearable>
              <el-option
                      v-for="b in bloodtypeList"
                      :key="b"
                      :value="b"
                      :label="b"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="成就" prop="achievement">
            <el-tag
                    v-for="achievement in formData.achievement"
                    :key="achievement"
                    closable
                    @close="handleCloseAchievement(achievement)"
                    class="mr10"
                    size="mini"
            >{{achievement}}</el-tag>
            <el-input
                    v-if="inputAchievementVisible"
                    ref="saveAchievementInputRef"
                    v-model="inputAchievementValue"
                    class="input-new-tag"
                    size="mini"
                    @keyup.enter="handleInputAchievementConfirm"
                    @blur="handleInputAchievementConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="mini" @click="showAchievementInput"
            >+ 添加成就</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div align="center">
        <el-button type="default" size="mini" @click="handleCancelDialog">取消</el-button>
        <el-button type="primary" size="mini" @click="dialogStatus == 'create' ? handleCreatePerson() : handleUpdatePerson()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {toRef, reactive, ref, nextTick} from 'vue'
  import {createPerson, updatePerson} from "@/api/media/constant";
  import {ElMessage} from 'element-plus'

  export default {
    name: "CreatePerson",
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      dialogStatus: {
        type: String,
        default: 'create'
      },
      dialogFormData: {
        type: Object,
        default() {
          return {
            id: undefined,
            name: '',
            enname: '',
            gender: '未知',
            birthdate: '',
            birthplace: '',
            bloodtype: '',
            constellation: '',
            occupation: [],
            profile: '',
            achievement: [],
            works: [],
          }
        }
      }
    },
    emits: ['handleCancelDialog', 'reloadData'],
    setup(props, context) {
      const formData = toRef(props, 'dialogFormData')
      const rules = reactive({
        name: [{required: true, message: '请输入人物姓名', trigger: 'blur'}]
      })
      const genderList = ref(['未知', '男', '女'])
      const constellationList = ref(['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座','未知'])
      const bloodtypeList = ref(['其他', 'A', 'B', 'AB', 'O'])
      const dialogFormDataRef = ref(null)
      const inputWorkVisible = ref(false)
      const inputWorkValue = ref('')
      const saveWorkInputRef = ref(null)
      const inputOccupationVisible = ref(false)
      const inputOccupationValue = ref('')
      const saveOccupationInputRef = ref(null)
      const inputAchievementVisible = ref(false)
      const inputAchievementValue = ref('')
      const saveAchievementInputRef = ref(null)

      /** 关闭弹框 **/
      const handleCancelDialog = () => {
        context.emit('handleCancelDialog')
      }
      /** 删除作品标签 **/
      const handleCloseWork = (work) => {
        formData.value.works.splice(formData.value.works.indexOf(work), 1)
      }
      /** 回车添加作品 **/
      const handleInputWorkConfirm = () => {
        if (inputWorkValue.value) {
          formData.value.works.push(inputWorkValue.value)
        }
        inputWorkVisible.value = false
        inputWorkValue.value = ''
      }
      /** 显示输入作品文本框 **/
      const showWorkInput = () => {
        inputWorkVisible.value = true
        nextTick(() => {
          saveWorkInputRef.value.input.focus()
        })
      }
      /** 删除职业标签 **/
      const handleCloseOccupation = (occupation) => {
        formData.value.occupation.splice(formData.value.occupation.indexOf(occupation), 1)
      }
      /** 回车添加职业 **/
      const handleInputOccupationConfirm = () => {
        if (inputOccupationValue.value) {
          formData.value.occupation.push(inputOccupationValue.value)
        }
        inputOccupationVisible.value = false
        inputOccupationValue.value = ''
      }
      /** 显示输入职业文本框 **/
      const showOccupationInput = () => {
        inputOccupationVisible.value = true
        nextTick(() => {
          saveOccupationInputRef.value.input.focus()
        })
      }

      /** 删除成就标签 **/
      const handleCloseAchievement = (achievement) => {
        formData.value.achievement.splice(formData.value.achievement.indexOf(achievement), 1)
      }
      /** 回车添加职业 **/
      const handleInputAchievementConfirm = () => {
        if (inputAchievementValue.value) {
          formData.value.achievement.push(inputAchievementValue.value)
        }
        inputAchievementVisible.value = false
        inputAchievementValue.value = ''
      }
      /** 显示输入职业文本框 **/
      const showAchievementInput = () => {
        inputAchievementVisible.value = true
        nextTick(() => {
          saveAchievementInputRef.value.input.focus()
        })
      }
      /** 创建人物 **/
      const handleCreatePerson = () => {
        dialogFormDataRef.value.validate(valid => {
          if (valid) {
            createPerson(formData.value).then(response => {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              handleCancelDialog()
              context.emit('reloadData')
            })
          }
        })
      }
      /** 编辑人物 **/
      const handleUpdatePerson = () => {
        dialogFormDataRef.value.validate(valid => {
          if (valid) {
            updatePerson(formData.value).then(response => {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              handleCancelDialog()
              context.emit('reloadData')
            })
          }
        })
      }

      return {
        handleCancelDialog,
        formData,
        rules,
        genderList,
        constellationList,
        bloodtypeList,
        dialogFormDataRef,
        handleCloseWork,
        inputWorkVisible,
        inputWorkValue,
        handleInputWorkConfirm,
        showWorkInput,
        saveWorkInputRef,
        inputOccupationValue,
        inputOccupationVisible,
        handleCloseOccupation,
        handleInputOccupationConfirm,
        showOccupationInput,
        saveOccupationInputRef,
        inputAchievementValue,
        inputAchievementVisible,
        saveAchievementInputRef,
        handleCloseAchievement,
        handleInputAchievementConfirm,
        showAchievementInput,
        handleCreatePerson,
        handleUpdatePerson
      }
    }
  }
</script>

<style scoped>

</style>
